<?php
$isValid = true;
if (version_compare(PHP_VERSION, '8.0', '<')) {
    echo "PHP version must be greater than or equal to 8.0. Current version: " . PHP_VERSION . "\n";
    $isValid = false;
}
if (!extension_loaded('redis')) {
    $isValid = false;
}
?>
<!DOCTYPE html>
<html lang="zh">
<link rel="icon" href="/ast/logo/logo.ico">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Installer</title>
    <style>
        body {
            font-family: 'SF Pro Display', 'SF Pro Text', 'SF Pro Icons', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
            background: linear-gradient(135deg, #1a2a6c, #b21f1f, #b21f1f, #1a2a6c);
            background-size: 600% 600%;
            animation: gradient 15s ease infinite;
            color: #f0f0f0;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }

        @keyframes gradient {
            0% {
                background-position: 0% 50%;
            }

            50% {
                background-position: 100% 50%;
            }

            100% {
                background-position: 0% 50%;
            }
        }

        .container {
            width: 90%;
            max-width: 500px;
            margin: 0 auto;
            background-color: #282c34;
            padding: 30px;
            border-radius: 15px;
            box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
            border: 1px solid rgba(255, 255, 255, 0.1);
            animation: fadeIn 1s ease-in-out;
        }

        @keyframes fadeIn {
            from {
                opacity: 0;
            }

            to {
                opacity: 1;
            }
        }

        h1 {
            text-align: center;
            margin-bottom: 30px;
            color: #82b1ff;
            text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
        }

        label {
            display: block;
            text-align: center;
            margin-bottom: 5px;
            color: #82b1ff;
        }

        input[type="text"],
        input[type="password"] {
            width: 100%;
            padding: 15px;
            margin-bottom: 20px;
            border: none;
            border-bottom: 2px solid #82b1ff;
            background-color: transparent;
            color: #f0f0f0;
            font-size: 16px;
            transition: border-color 0.3s ease;
        }

        input[type="text"]:focus,
        input[type="password"]:focus {
            border-bottom-color: #fff;
            outline: none;
        }

        button {
            width: 100%;
            padding: 15px 20px;
            background-color: #007bff;
            color: #fff;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }

        button:hover {
            background-color: #0056b3;
        }

        button:active {
            background-color: #004085;
        }

        .steps {
            display: flex;
            justify-content: center;
            margin-top: 20px;
        }

        .step {
            margin: 0 10px;
            padding: 5px 10px;
            background-color: #82b1ff;
            color: #282c34;
            border-radius: 5px;
            font-size: 14px;
        }

        .step.active {
            background-color: #007bff;
            color: #fff;
        }

        .step.disabled {
            background-color: #555;
            color: #888;
        }

        body::-webkit-scrollbar {
            display: none;
        }

        .step-content {
            opacity: 0;
            transition: opacity 0.5s ease-in-out;
        }

        .step-content.active {
            opacity: 1;
            display: block;
        }


        .steps .step {
            transition: background-color 0.3s ease, color 0.3s ease;
        }

        .steps .step.active {
            background-color: #007bff;
            color: #fff;

        }

        .steps .step.disabled {
            background-color: #555;
            color: #888;
        }

        .step-content {
            opacity: 0;
            transition: opacity 0.5s ease-in-out;
            transform: translateY(20px);
            transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out;
        }

        .step-content.active {
            opacity: 1;
            transform: translateY(0);
            display: block;
        }


        .steps .step {
            transition: background-color 0.3s ease, color 0.3s ease;
        }

        .steps .step.active {
            background-color: #007bff;
            color: #fff;
        }

        .steps .step.disabled {
            background-color: #555;
            color: #888;
        }

        .swal2-html-container::-webkit-scrollbar {
            display: none;
        }
    </style>
</head>

<body>
    <div class="container">
        <h1>Installer</h1>
        <div class="steps">
            <div class="step active">1. Read the notice</div>
            <div class="step">2. Database configuration</div>
            <div class="step">3. Complete the installation</div>
        </div>
        <div id="step1" class="step-content active" style="display: block;">
            <p>Please read the following notices carefully before proceeding with the installation:</p>
            <p>The Program is protected by copyright and may not be copied or distributed without authorization. By installing, you agree to our Terms of Use.</p>
            <p>You need to obtain our license before completing the installation, otherwise you will not be able to install the program and use all functions normally</p>
            <p>Of course, our license is free, and one license is enjoyed for life; However, the authorization interface is temporarily not open to the public, and you may need to pay a fee before authorization</p>
            <p>You can go to our official website to authorize: www.yhknow.top</p>
            <p>---------------------------------------------------------------------</p>
            <p>Ensure that the PHP version is greater than or equal to 8.0</p>
            <p>Ensure that the database is MySQL 5.7 or later</p>
            <p>Ensure that the Redis extension is enabled</p>
            <p>Please don't try to skip it</p>
            <?php if ($isValid): ?>
                <button onclick="showStep(2)">I Agree</button>
            <?php endif; ?>
        </div>
        <div id="step2" class="step-content" style="display: none;">
            <form id="step2Form">
                <label for="dbHost">HOST</label>
                <input type="text" id="dbHost" name="dbHost" value="localhost" required><br>
                <label for="dbName">Database Name:</label>
                <input type="text" id="dbName" name="dbName" required><br>
                <label for="dbUsername">Username:</label>
                <input type="text" id="dbUsername" name="dbUsername" required><br>
                <label for="dbPassword">Password:</label>
                <input type="password" id="dbPassword" name="dbPassword" required><br>
                <button type="button" onclick="nextStep(2)">Officially installed</button>
            </form>
        </div>
        <div id="step3" class="step-content" style="display: none;">
            <p>The installation is complete! Thank you for your patience.</p>
            <p>You can now start using our program</p>
            <p>Please delete the INSTALL directory</p>
            <button id="getstarted_btn">Get started</button>
        </div>
    </div>
    <script src="/ast/sweetalert/sweetalert2.all.js"></script>
    <script>
        function showStep(step) {
            const steps = document.querySelectorAll('.step-content');
            const stepNavs = document.querySelectorAll('.steps .step');

            steps.forEach(stepEl => {
                stepEl.classList.remove('active');
            });

            stepNavs.forEach((stepNav, index) => {
                stepNav.classList.remove('active', 'disabled');
                if (index < step - 1) {
                    stepNav.classList.add('active');
                } else if (index === step - 1) {
                    stepNav.classList.add('active');
                } else {
                    stepNav.classList.add('disabled');
                }
            });
            setTimeout(() => {
                document.getElementById('step' + (step - 1)).remove();
                const currentStep = document.getElementById('step' + step);
                currentStep.classList.add('active');
                currentStep.style.display = 'block';
            }, 750);
        }

        function nextStep(step) {
            var xhr = new XMLHttpRequest();
            var dbHost = document.getElementById('dbHost').value;
            var dbName = document.getElementById('dbName').value;
            var dbUsername = document.getElementById('dbUsername').value;
            var dbPassword = document.getElementById('dbPassword').value;

            if (dbHost === '' || dbName === '' || dbUsername === '' || dbPassword === '') {
                Swal.fire('Error', 'Please fill in all the fields', 'error');
                return;
            }
            Swal.fire({
                title: 'Create an administrator account',
                html: `
               
    <input id="adminAccountName" style="width:90%" class="swal2-input" placeholder="Administrator account name">
    <input id="adminAccountPassword" style="width:90%" class="swal2-input"  placeholder="Administrator account password">
     <input id="backgroundloginaddress" style="width:90%" class="swal2-input"  placeholder="Bkg login addr(admin)">
      <input id="redis_ip" style="width:90%" class="swal2-input" value="127.0.0.1"  placeholder="Redis ip">
       <input id="redis_port" style="width:90%" class="swal2-input"  value="6379" placeholder="Redis Port">
        <input id="redis_password" style="width:90%" class="swal2-input"  placeholder="Redis password">

  `,
                showCancelButton: true,
                confirmButtonText: 'determine',
                cancelButtonText: 'Cancel',
                preConfirm: () => {
                    const accountName = document.getElementById('adminAccountName').value;
                    const accountPassword = document.getElementById('adminAccountPassword').value;
                    const backgroundloginaddress = document.getElementById('backgroundloginaddress').value;
                    const redis_ip = document.getElementById('redis_ip').value;
                    const redis_port = document.getElementById('redis_port').value;
                    const redis_password = document.getElementById('redis_password').value;
                    if (!accountName || !accountPassword || !backgroundloginaddress || !redis_ip || !redis_port ) {
                        Swal.showValidationMessage('Please fill in both fields');
                    }
                    if(redis_password === null || redis_password === ''){
                        redis_password = 'null';
                    }
                    return {
                        accountName,
                        accountPassword,
                        backgroundloginaddress,
                        redis_ip,
                        redis_port,
                        redis_password
                    };
                }
            }).then((result) => {
                if (result.isConfirmed) {
                    const accountName = result.value.accountName;
                    const accountPassword = result.value.accountPassword;
                    const bkgloginaddress = result.value.backgroundloginaddress;
                    const redis_ip = result.value.redis_ip;
                    const redis_port = result.value.redis_port;
                    const redis_password = result.value.redis_password;
                    xhr.open("POST", "call.php", true);
                    xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
                    xhr.onreadystatechange = function() {
                        if (xhr.readyState === 4) {
                            if (xhr.status === 200) {
                                if (xhr.responseText.includes("success")) {
                                    document.cookie = "loginperson=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";
                                    document.cookie = "installilon=value; expires=Fri, 31 Dec 2033 23:59:59 GMT; path=/";
                                    showStep(3);
                                    Swal.fire('Success', 'Installation completed successfully!', 'success');
                                    document.getElementById('getstarted_btn').addEventListener('click', function() {
                                        location.href='./pz.php?bklogin='+bkgloginaddress+'&redis_ip='+redis_ip+'&redis_port='+redis_port+'&redis_password='+redis_password;
                                    });
                                } else {
                                    Swal.fire('Error', 'Installation failed: ' + xhr.responseText, 'error');
                                }
                            } else {
                                Swal.fire('Error', 'An error occurred during installation: ' + xhr.statusText, 'error');
                            }
                        }
                    };
                    xhr.send("dbHost=" + dbHost + "&dbName=" + dbName + "&dbUsername=" + dbUsername + "&dbPassword=" + dbPassword + "&accountName=" + accountName + "&accountPassword=" + accountPassword);
                }
            });

        }
    </script>
</body>

</html>